<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <button @click="click2">点我</button>
    <template>{{message}}</template>
    <template>{{click2}}</template>
    <!--模板上的apples属于父组件作用域-->
    <btn v-for="item in apples"></btn>

</div>

<template id="btn">
    <ul>
        <!--子组件apples2属于子组件本身的作用域-->
        <li v-for="apple in apples2">{{apple}}</li>
    </ul>
</template>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>
    // 可以使用 `v-on:keyup.f1`
    //Vue.config.keyCodes.f1 = 112


    const btn = {
        template: "#btn",
        data() {
            return {
                apples2:[1,2,3,4,5]
            }
        }
    };

    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            title: "fa",
            apples:[1,2,3,4]
        },
        components: {
            btn: btn
        },
        created: function () {
            axios.get('http://localhost:8200/api/author/get/get')
                .then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                console.log(error);
            });
        },
        mounted: function () {

        },
        methods: {
            click() {
                alert("我点你了")
            }
        },
        computed: {
            click2: function () {

                alert("我又点你了")
                return "Nihao"
            }
        }
    })


</script>
</body>
</html>